<template>
  <div style="padding: 10px">
    <el-card>
      <forms :search="search"></forms>
      <el-alert :closable="false" :title="counts" type="info" show-icon>
      </el-alert>
      <el-table
        :data="list.items"
        align="left"
        style="width: 100%; margin-top: 15px"
      >
        <el-table-column prop="number" label="试题编号" width="120">
        </el-table-column>
        <el-table-column prop="subject" label="学科"> </el-table-column>
        <el-table-column prop="catalog" label="目录"> </el-table-column>
        <el-table-column label="题型">
          <template #default="scope">
            {{ scope.row.questionType === "1" ? "单选" : "多选" }}
          </template>
        </el-table-column>
        <el-table-column prop="question" label="题干" width="280">
          <template #default="scope">
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间"> </el-table-column>
        <el-table-column label="难度">
          <template #default="scope">
            {{ scope.row.difficulty === "1" ? "简单" : "困难" }}
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人"> </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              @click="view(scope.row)"
              icon="el-icon-view"
              size="small "
              type="primary"
              plain
              circle
            ></el-button>
            <el-button
              @click="$router.push(`new?id=${scope.row.id}`)"
              icon="el-icon-edit"
              size="small"
              type="success"
              plain
              circle
            ></el-button>
            <el-button
              @click="del(scope.row)"
              icon="el-icon-delete"
              size="small"
              type="danger"
              plain
              circle
            ></el-button>
            <el-button
              @click="choices(scope.row)"
              icon="el-icon-check"
              size="small"
              type="warning"
              plain
              circle
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="bottom">
        <el-pagination
          @size-change="handleSizeChange($event)"
          @current-change="handleCurrentChange($event)"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="5"
          layout=" prev, pager, next, sizes, jumper"
          :background="true"
          :page-count="list.pages"
        >
        </el-pagination>
      </div>
    </el-card>
    <el-dialog title="题目预览" :visible.sync="dialogVisible" width="47%">
      <div style="display: flex; flex-wrap: wrap">
        <span style="width: 25%; height: 36px; line-height: 36px"
          >【题型】：{{ msgList.questionType }}题</span
        >
        <span style="width: 25%; height: 36px; line-height: 36px"
          >【编号】：{{ msgList.id }}</span
        >
        <span style="width: 25%; height: 36px; line-height: 36px"
          >【难度】：{{ msgList.difficulty }}</span
        >
        <span style="width: 25%; height: 36px; line-height: 36px"
          >【标签】：{{ msgList.tags }}</span
        >
        <span style="width: 25%; height: 36px; line-height: 36px"
          >【学科】：{{ msgList.subjectName }}</span
        >
        <span style="width: 25%; height: 36px; line-height: 36px"
          >【目录】：{{ msgList.directoryName }}</span
        >
        <span style="width: 25%; height: 36px; line-height: 36px"
          >【方向】：{{ msgList.direction }}</span
        >
      </div>
      <hr />
      <span>【题干】：</span><br />
      <div style="color: blue" v-html="msgList.question"></div>
      <span v-show="msgList.questionType !== '简答'"
        >{{ msgList.questionType }}题 选项： （以下选中的选项为正确答案）</span
      >
      <div v-if="msgList.questionType === '多选'">
        <div
          style="margin: 15px 0"
          v-for="item in msgList.options"
          :key="item.id"
        >
          <el-checkbox
            :value="item.isRight === 1"
            :checked="item.isRight === 1"
            >{{ item.title }}</el-checkbox
          ><br />
        </div>
      </div>
      <div v-if="msgList.questionType === '单选'">
        <div
          style="margin: 15px 0"
          v-for="item in msgList.options"
          :key="item.id"
        >
          <el-radio :value="radio" :label="item.isRight">{{
            item.title
          }}</el-radio
          ><br />
        </div>
      </div>
      <hr />
      <span>【参考答案】：</span>
      <el-button size="small" type="danger" @click="isShow = true"
        >视频答案预览</el-button
      >
      <br />
      <video width="400" height="300" controls v-show="isShow">
        <source :src="msgList.videoURL" type="video/mp4" />
      </video>
      <hr />
      <div
        style="display: flex"
        v-html="'<p>【答案解析】：</p>' + msgList.answer"
      ></div>
      <hr />
      <div>【题目备注】：{{ msgList.remarks }}</div>
      <span
        slot="footer"
        class="dialog-footer"
        style="display: block; text-align: center"
      >
        <el-button type="primary" @click="dialogVisible = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import forms from './components/forms.vue'
import { list, detail, remove, choiceAdd } from '@/api/hmmm/questions'
import moment from 'moment'
export default {
  components: { forms },
  data () {
    return {
      choice: {},
      isShow: false,
      radio: 1,
      msgList: {},
      dialogVisible: false,
      list: {
        page: 1,
        pagesize: 5
      },
      counts: '',
      lists: {}
    }
  },
  async created () {
    await this.getList()
    this.counts = `数据一共 ${this.list.counts} 条`
  },
  methods: {
    async choices (row) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
        .then(async () => {
          this.choice.id = row.id
          this.choice.choiceState = 1
          await choiceAdd(this.choice)
          this.$message({
            type: 'success',
            message: '加入精选成功'
          })
        })
        .catch(() => {})
    },
    async del (row) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove(row)
          this.getList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {})
    },
    async view (row) {
      const { data: res } = await detail(row)
      this.msgList = { ...res }
      if (this.msgList.questionType === '1') {
        this.msgList.questionType = '单选'
      } else if (this.msgList.questionType === '2') {
        this.msgList.questionType = '多选'
      } else {
        this.msgList.questionType = '简答'
      }
      if (this.msgList.difficulty === '1') {
        this.msgList.difficulty = '简单'
      } else if (this.msgList.difficulty === '2') {
        this.msgList.difficulty = '一般'
      } else {
        this.msgList.difficulty = '困难'
      }
      this.dialogVisible = true
    },
    async getList () {
      const { data: res } = await list(this.list)
      this.list = res
      this.list.items.forEach((item) => {
        item.addDate = moment(item.addDate).format('YYYY-MM-DD HH:mm:ss')
      })
    },
    async search (val) {
      val.page = 1
      val.pagesize = 5
      this.lists = { ...val }
      this.lists.subjectID = this.lists.subjects
      this.lists.province = this.lists.provinces
      this.lists.city = this.lists.citys
      this.lists.catalogID = this.lists.catalog
      delete this.lists.subjects
      delete this.lists.provinces
      delete this.lists.citys
      delete this.lists.catalog
      const { data: res } = await list(this.lists)
      this.list = res
      this.list.items.forEach((item) => {
        item.addDate = moment(item.addDate).format('YYYY-MM-DD HH:mm:ss')
      })
    },
    async handleSizeChange (e) {
      this.list.pagesize = e
      const { data: res } = await list(this.list)
      this.list = res
    },
    async handleCurrentChange (e) {
      this.list.page = e
      const { data: res } = await list(this.list)
      this.list = res
    }
  }
}
</script>

<style scoped lang='scss'>
.el-form-item {
  margin-bottom: 0px;
}
::v-deep .has-gutter {
  border: 10px solid #ccc;
  th {
    background-color: #fafafa;
  }
}
::v-deep .el-table__header {
  border-bottom: 1px solid #e8e8e8;
}
.bottom {
  width: 100%;
  text-align: right;
  margin-top: 20px;
}
</style>
